<template>
	<view>
		<view class="top">
			<image :src="src" class="bannerMain"></image>
		</view>
		<view class="center">
			<!-- <text>Hi,{{userName}}\n</text> -->
			<text>{{text}}</text>
		</view>
		<button class="btn" type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo" v-if="userState==0 || userState ==2 || userState ==4">立即参加</button>
		<button class="btn" type="primary" open-type="share" v-if="userState==1 || userState ==3">立即分享</button>
		<button class="btn" type="primary" v-if="userType == 1">核销管理</button>
		<button class="btn" type="primary" @tap="showInviteCode" v-if="InviteCode && userState==1 || userState ==3">我的优惠码</button>
		<view class="qrcodeBox" :class="{active : qrcodeBoxShow}">
			<canvas canvas-id="qrcode" class="qrcode" />
			<text class="textQR">您的优惠码：{{InviteCode}}</text>
			<button size="mini" class="btnQR" type="primary" @tap="qrcodeBoxShow = false">关闭</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default {
		data() {
			return {
				src: '/static/img/banner-main.png',
				text: '活动规则：\n1. 您可以邀请好友来参加该砍价活动，您与您的好友将分别获得返奖励与购买折扣。\n2. 一位参与者最多可邀请10人参与。',
				SessionId: '',
				InviteCodeFrom: '',
				qrcodeBoxShow: false
			};
		},
		computed: mapState({
			userName: 'userName',
			userType: 'userType',
			Token: 'Token',
			userState: 'userState',
			InviteCode: 'InviteCode',
		}),
		onLoad: function(option) {
			this.login(this.getInfo)
			if (option.InviteCode) {
				this.InviteCodeFrom = option.InviteCode
			}
		},
		onShareAppMessage(res) {
			// if (res.from === 'button') {// 来自页面内分享按钮
			//   console.log(res.target)
			// }
			return {
				title: '邀请好友一起来购买吧~',
				path: '/pages/index/index?InviteCode=' + this.InviteCode
			}
		},
		methods: {
			...mapMutations(['loginFront', 'loginBack', 'setInviteCode']),
			login(callback) {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// console.log(loginRes)
						uni.request({
							url: 'https://app.slinqueen.com/minicard/WxOpenAPI/OnLogin',
							method: 'POST',
							data: {
								Code: loginRes.code
							},
							success: (res) => {
								// console.log(res.data);
								if (res.data.code == 0) {
									callback(res)
								}
							}
						});
					}
				});
			},
			getInfo(res) {
				var _this = this;
				_this.SessionId = res.data.data;
				uni.getUserInfo({
					success: function(userInfo) {
						_this.loginFront(userInfo.userInfo)
						uni.request({
							url: 'https://app.slinqueen.com/minicard/WxOpenAPI/CheckSignAndEncryptedUserData',
							method: 'POST',
							data: {
								RawData: userInfo.rawData,
								Signature: userInfo.signature,
								SessionId: _this.SessionId,
								EncryptedData: userInfo.encryptedData,
								Iv: userInfo.iv,
								InvitationCode: _this.InviteCodeFrom
							},
							success: (res) => {
								// console.log(res)
								if (res.data.code == 0) {
									var userData = res.data.data
									// console.log(userData)
									_this.loginBack(userData)
								}
							},
						});
					},
					fail: function(msg) {
						console.log(msg)
					}
				})
			},
			getUserInfo({
				detail
			}) {
				if (detail.userInfo) {
					// if(this.userState === 4) {  4:未授权
					if (this.userState !== 0 && this.userState !== 2) {
						this.login(this.getInfo)
					}
					if (this.userState === 0 || this.userState === 2) {
						uni.navigateTo({
							url: '/pages/info/info'
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '登陆失败'
					});
				}
			},
			showInviteCode() {
				console.log(this.Token)
				uni.request({
					url: 'https://app.slinqueen.com/minicard/UserAPI/GetUserCardList',
					method: 'GET',
					header: {'Token':this.Token},
					success: (res) => {
						if (res.data.code == 0) {
							uQRCode.make({
								canvasId: 'qrcode',
								text: res.data.data,
								size: 180,
								backgroundColor: '#ffffff',
								foregroundColor: '#000000',
								correctLevel: uQRCode.defaults.correctLevel,
								success: res => {
									console.log(res)
								}
							});
							this.qrcodeBoxShow = true;
						}
					},
				});
			}
		}
	}
</script>

<style lang="less">
	.top {
		width: 750upx;
		height: 300upx;

		.bannerMain {
			width: 100%;
			height: 100%;
		}
	}

	.center {
		padding: 30upx 20upx;
	}

	.btn {
		margin: 20upx 20upx 0;
	}
	.qrcodeBox {
		position: absolute;width:100%;height:100%;background-color: rgba(0,0,0,0.78);
		pointer-events: none;top:0;left:0;display:none;
		&.active {
			pointer-events: auto;display:block;
		}
		.qrcode {
			width:180px;height:180px;
			pointer-events: none;
			margin:50% auto 0;
		}
		.textQR {
			margin:10upx auto 0;
			display: block;color:#ffffff;
			text-align:center;
		}
		.btnQR {
			margin:10upx auto 0;
			display: block;
			width:100px;
		}
	}
</style>
